<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
  <title>级联查询</title>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript">
      function doAjax() {
          // 做ajax请求，使用jquery的$.ajax()
          $.ajax({
              url:"queryServlet",
              dataTypes:"json",
              success:function(resp) {
                  // 删除旧的数据
                  $("#province").empty();
                  alert(resp);
                  $.each(resp,function (i,n) {
                      $("#province").append("<option value=' "+n.id+"'>"+n.name+"</option>");
                  })
              }
          })
      }
    $(function () {
        // $(function (){})在页面的dom对象加载完成后执行的函数，在此发起ajax请求
        doAjax();
        alert("111111");
      // 绑定事件
      $("#bunLoad").click(function () {
        // 做ajax请求，使用jquery的$.ajax()
          doAjax();
      })
        $("#province").change(function (){
            // 获取选中列表框中的值
            var obj=$("#province>option:selected");
            var proid=obj.val();
            // 做ajax请求，获取省份的对应城市信息
            // $.post(url,数据(json格式)，function(resp)(要做的事),期望要接受的数据类型(一般为json))
            $.post("cityServlet",{proid:proid},comeBack,"json");
        })
    })
      // 定义一个处理返回数据的方法
      function comeBack(resp) {
          // 情况原列表数据
          $("#city").empty();
          $.each(resp,function (i,n) {
              $("#city").append("<option value='"+n.id+"'>"+n.name+"</option>");
          })
      }
  </script>
</head>

</body>
</html>